<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>domc-keyed</title>
    <link href="/css/currentStyle.css" rel="stylesheet"/>
    <script src='dist/app.min.js' type="module"></script>
</head>
<body>
<div class="container" id="main">
    <div class="jumbotron">
        <div class="row">
            <div class="col-md-6">
                <h1>domc-keyed</h1>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="run" onclick="run">Create 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="runlots" onclick="runLots">Create 10,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary
                        btn-block" id="add" onclick="add">Append 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary
                        btn-block" id="update" onclick="update">Update every 10th row</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary
                        btn-block" id="clear" onclick="clearData">Clear</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary
                        btn-block" id="swaprows" onclick="swapRows">Swap Rows</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-hover table-striped test-data">
        <tbody>
            <tr v-for="item of data" class="{{item.id === selected ? 'danger' : ''}}">
                <td class="col-md-1">{{item.id}}</td>
                <td class="col-md-4">
                    <a onclick="select(item)">{{item.label}}</a>
                </td>
                <td class="col-md-1"><a onclick="del(item)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
                <td class="col-md-6"></td>
            </tr>
        </tbody>
    </table>

    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</body>
</html>
